<template>
  <view class="friend-content">
    <view class="friend-content-box">
      <view class="friend-box">
        <view class="friend-search">
          <image src="@/static/mine/search.svg" mode="" />
          <input
            type="text"
            @confirm="getKeyUpSearch"
            v-model="searchWrite"
            placeholder="搜索"
          />
        </view>
      </view>
    </view>
  </view>
  <view class="friend-list">
    <Empty v-if="!userData.length" title="暂无好友" />
    <template v-else>
      <view class="friend-list-content" v-for="(s, k) in userData">
        <view style="display: flex; align-items: center">
          <view
            class="friend-list-box"
            @click="$goUrl(`/pages/index/pages/businessCard?id=${s.userId}`)"
          >
            <image :src="s.image" mode="" />
          </view>
          <view
            class="friend-list-text"
            @click="$goUrl(`/pages/index/pages/businessCard?id=${s.userId}`)"
          >
            <text>{{ s.userName || s.createName }}</text>
            <view class="user-name">
              <text>{{ s?.position || "暂无" }}</text>
              <text>（{{ s?.company || "暂无" }}）</text>
            </view>
          </view>
        </view>
        <view>
          <image
            style="width: 40rpx; height: 40rpx"
            src="/static/icon/msg1.svg"
            mode="widthFix"
            @click="chat(s.userId, s.nickName)"
          />
        </view>
      </view>
    </template>
  </view>
</template>
<script lang="ts" setup>
import { ref, watch } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getFriendList, banner } from "@/api/apiList";

const chat = (id, name) => {
  uni.navigateTo({
    url: `/pages/circle/pages/chat?id=${id}&name=${name}`,
  });
};

const searchWrite = ref("");
const userData = ref<
  Array<{ userName: string; image: string; position: string; company: string }>
>([]);
const getFriendListData = async (nickName) => {
  const friend = await getFriendList({
    nickName: nickName,
    status: 1,
    pageSize: 999,
  });
  friend?.rows.map((items) => {
    userData.value.push({
      image: items.avatar,
      userName: items.nickName,
      position: items.department,
      company: items.company,
      ...items,
    });
  });
};
getFriendListData("");

const getKeyUpSearch = (e) => {
  console.log(searchWrite.value, "searchWrite");
  userData.value = [];
  getFriendListData(searchWrite.value);
};
</script>

<style lang="scss" scoped>
.friend-content-box {
  border-bottom: 1rpx solid #eeeeee;
}

.friend-box {
  padding: 30rpx;
}

.friend-search {
  display: flex;
  align-items: center;
  height: 35px;
  border-radius: 18px;
  background: #f6f6f6;
  padding-left: 24rpx;

  image {
    width: 26rpx;
    height: 26rpx;
  }

  input {
    padding-left: 10rpx;
    height: 100%;

    font-family: PingFang SC Regular;
    font-size: 12px;
  }
}

// 好友列表
.friend-list {
  margin: 40rpx;
}

.friend-list-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1rpx solid #eeeeee;
  padding-bottom: 30rpx;
  margin-bottom: 40rpx;

  .friend-list-box {
    image {
      width: 100rpx;
      height: 100rpx;
      border-radius: 100rpx;
    }
  }

  .friend-list-text {
    margin-left: 14rpx;

    > text {
      font-family: PingFang SC Bold;
      font-size: 12px;
      color: #111111;
    }

    .user-name {
      text {
        font-family: PingFang SC Regular;
        font-size: 12px;
        /* 总经理 */
        color: #111111;

        &:nth-last-child(1) {
          color: #999999;
        }
      }
    }
  }
}
</style>
<style>
page {
  background: white;
}
</style>
